<div class="default-background">
    <h2 class="flex-row-space-between" style="margin-bottom: 0px;"> {{'EVENT_DASHBOARD'|translate}}</h2>
    <app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs"></app-search>
    <div style="display: flex;flex-direction: row;align-items: center;height: 56px;justify-content:space-between;">
        <div>
            <mat-radio-group [formControl]="filter">
                <mat-radio-button value="all" style="margin: 4px 0px;">
                    <div style="margin-right: 20px;">{{'ALL_TYPE'|translate}}</div>
                </mat-radio-button>
                <mat-radio-button value="audit"  style="margin: 4px 0px;">
                    <div style="margin-right: 20px;">{{'AUDIT_TYPE'|translate}}</div>
                </mat-radio-button>
                <mat-radio-button value="rejected"  style="margin: 4px 0px;">
                    <div style="margin-right: 20px;">{{'REJECTED_TYPE'|translate}}</div>
                </mat-radio-button>
                <mat-radio-button value="unroutable"  style="margin: 4px 0px;">
                    <div style="margin-right: 20px;">{{'ROUTE_TYPE'|translate}}</div>
                </mat-radio-button>
            </mat-radio-group>
        </div>
    </div>
    <div style="margin-bottom: 20px;">
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">

                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>{{columnList['id']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.id"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>{{columnList['name']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.name|translate"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="domainId">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['domainId']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.domainId"></app-copy-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="internal">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['internal']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-icon *ngIf="row.internal" [color]="'primary'">
                            check_circle_outline
                        </mat-icon>
                        <mat-icon *ngIf="row.internal===false" [color]="'primary'">cancel
                        </mat-icon>
                    </td>
                </ng-container>

                <ng-container matColumnDef="timestamp">
                    <th mat-header-cell *matHeaderCellDef>{{columnList['timestamp']|translate}}</th>
                    <td mat-cell *matCellDef="let row">
                        {{row.timestamp|date:'M/d/yy, h:mm:ss a'}}
                    </td>
                </ng-container>
                <ng-container matColumnDef="eventBody">
                    <th mat-header-cell *matHeaderCellDef>{{columnList['eventBody']|translate}}</th>
                    <td mat-cell *matCellDef="let row">
                        <mat-icon (click)="launchOverlay(origin,row)" #origin [color]="'primary'">
                            remove_red_eye</mat-icon>
                    </td>
                </ng-container>

                <ng-container matColumnDef="retry">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['retry']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="doRetry(row.id)" [color]="'primary'">redo</mat-icon>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>
        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount"
            [pageIndex]="tableSource.pageNum" [pageSize]="tableSource.pageSize"
            (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
    </div>
</div>